<!--
	课程管理下的--批量导入课程
-->
<template>
<div class="import-box">
	<el-upload
		class="upload-demo"
		drag
		multiple
		:before-upload="beforeFile"
		:accept="['.xls','.xlsx']"
		action="//jsonplaceholder.typicode.com/posts/"
	>
		<el-icon class="el-icon--upload"><upload-filled /></el-icon>
		<div class="el-upload__text">
			拖拽文件或者 <em>点击上传</em>
		</div>
		<template #tip>
			<div class="el-upload__tip">
				仅excel文件，大小小于5M
			</div>
		</template>
	</el-upload>
	<button @click="click">click</button>
</div>
</template>

<script>
import excel from "@/utils/excel";

export default {
	name: "ImportCourse",
	methods:{
		beforeFile(file){
			const fileExt = file.name.split('.').pop().toLocaleLowerCase()
			this.uploadFile = file;
			if (fileExt === 'xlsx' || fileExt === 'xls') {
				this.readFile(file)
				this.file = file
				// excel.export_array_to_excel(this.file)
			} else {

			}
			return false;
		},
		// 读取文件
		readFile(file) {
			const reader = new FileReader()
			reader.readAsArrayBuffer(file)
			// 读取开始时触发
			reader.onloadstart = e => {
				this.uploadLoading = true
				this.tableLoading = true
				this.showProgress = true
			}
			// 读取中
			reader.onprogress = e => {
				this.progressPercent = Math.round(e.loaded / e.total * 100)
			}
			// 出错时触发
			reader.onerror = e => {
				console.error('文件读取出错');
			}
			// 文件读取成功完成时触发
			reader.onload = e => {
				const data = e.target.result
				const { header, results } = excel.read(data, 'array')
				const tableTitle = header.map(item => { return { title: item, key: item } })
				this.tableData = results  //这里的tableData就是拿到的excel表格中的数据
				this.tableTitle = tableTitle
				this.uploadLoading = false
				this.tableLoading = false
				this.showRemoveFile = true

				console.log(this.tableData);
			}
		},
		click(){

		},
	},
	created(){

	},
}
</script>

<style lang="scss" scoped>
.import-box{
	width: 100%;
	height: 100%;
}
</style>